<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .goodWarmp{
            width: 500px;
            display: flex;
            justify-content:left;
            border: 1px dashed black;
        }
        .goodWarmp>div:last-child{
            text-align: left;
        }
        .detail{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: fixed;
            right: 10px;
            top: 100px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="handleAjax">查看电影信息</button>
        <film-item v-for="(item,index) in dataList" :key="item.id" :mydata="item"></film-item>
        <show-detail></show-detail>
    </div>
        
    <script>
        var bus = new Vue();
       
        Vue.component("filmItem",{
            template : `
                <div class="goodWarmp">
                    <div>
                        <img :src="mydata.img"/>
                    </div>
                    <div>
                        <h2>{{mydata.nm}}</h2>
                        <p>
                            电影评分：<span>{{mydata.sc}}</span>
                        </p>
                        <p>
                            主要演员：<span>{{mydata.star}}</span>
                        </p>
                        <p>
                            <button @click="emitDetail">详情</button>
                        </p>
                    </div>
                </div>
            `,
            props : ["mydata"],
            methods : {
                emitDetail(){//发布信息
                    bus.$emit("myevent",this.mydata.showInfo);
                }
            }
        })
        
        Vue.component("showDetail",{
            template : `
                <div class="detail">{{detail}}</div>
            `,
            mounted(){
                bus.$on("myevent",data=>{
                    this.detail = data
                })
            },
            data(){
                return {
                    detail : "请点击查看详情"
                }
            }
        })

        var vm = new Vue({
            el : "#box",
            data : {
                dataList : [],
            },
            methods : {
                handleAjax(){
                    fetch("../data/maoyan.json")
                        .then(res=>res.json())
                        .then(res=>{
                            console.log(res.movieList)
                            this.dataList = res.movieList
                        })
                }
            }
        })
    </script>
</body>
</html>